<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CH洗衣客系统 - 后台管理</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1E40AF',
secondary: '#9333EA',
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.fa-icon {
display: flex;
justify-content: center;
align-items: center;
}
.sidebar {
transition: all 0.3s ease;
}
.sidebar.collapsed {
width: 80px;
}
.sidebar.collapsed .nav-text {
display: none;
}
.sidebar.collapsed .logo-text {
display: none;
}
.sidebar.collapsed .nav-item {
justify-content: center;
}
</style>
</head>
<body class="min-h-[1024px] bg-gray-50 font-sans text-gray-800 flex">
<!-- 左侧导航栏 -->
<div class="sidebar w-64 bg-blue-50 text-gray-800 h-screen fixed flex flex-col border-r border-gray-200">
<div class="p-4 flex items-center space-x-3 border-b border-gray-700 h-16">
<div class="text-2xl font-['Pacifico'] text-primary">logo</div>
<div class="logo-text text-xl font-semibold">CH洗衣客系统</div>
</div>
<div class="flex-1 overflow-y-auto py-4">
<div class="space-y-1 px-3">
<div class="nav-item group flex items-center px-3 py-3 rounded-lg cursor-pointer bg-primary text-white" onclick="setActiveNavItem(this)">
<i class="fa-icon w-6 h-6 mr-3"><i class="fas fa-list-alt text-white"></i></i>
<span class="nav-text">订单管理</span>
</div>
<div class="nav-item group flex items-center px-3 py-3 rounded-lg cursor-pointer hover:bg-blue-100" onclick="setActiveNavItem(this)">
<i class="fa-icon w-6 h-6 mr-3"><i class="fas fa-store text-gray-600 group-hover:text-primary"></i></i>
<span class="nav-text">门店管理</span>
</div>
<div class="nav-item group flex items-center px-3 py-3 rounded-lg cursor-pointer hover:bg-blue-100" onclick="setActiveNavItem(this)">
<i class="fa-icon w-6 h-6 mr-3"><i class="fas fa-truck text-gray-600 group-hover:text-primary"></i></i>
<span class="nav-text">配送管理</span>
</div>
<div class="nav-item group flex items-center px-3 py-3 rounded-lg cursor-pointer hover:bg-blue-100" onclick="setActiveNavItem(this)">
<i class="fa-icon w-6 h-6 mr-3"><i class="fas fa-headset text-gray-600 group-hover:text-primary"></i></i>
<span class="nav-text">客服工单</span>
</div>
<div class="nav-item group flex items-center px-3 py-3 rounded-lg cursor-pointer hover:bg-blue-100" onclick="setActiveNavItem(this)">
<i class="fa-icon w-6 h-6 mr-3"><i class="fas fa-chart-line text-gray-600 group-hover:text-primary"></i></i>
<span class="nav-text">数据统计</span>
</div>
<div class="nav-item group flex items-center px-3 py-3 rounded-lg cursor-pointer hover:bg-blue-100" onclick="setActiveNavItem(this)">
<i class="fa-icon w-6 h-6 mr-3"><i class="fas fa-cog text-gray-600 group-hover:text-primary"></i></i>
<span class="nav-text">系统管理</span>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-700 flex items-center justify-between">
<button id="toggleSidebar" class="text-gray-400 hover:text-white">
<i class="fa-icon w-6 h-6"><i class="fas fa-chevron-left"></i></i>
</button>
</div>
</div>
<!-- 主内容区 -->
<div class="flex-1 ml-64">
<!-- 顶部状态栏 -->
<div class="bg-white shadow-sm h-16 flex items-center justify-between px-6 fixed w-[calc(100%-16rem)] z-10">
<div class="flex items-center space-x-2">
<i class="fa-icon w-6 h-6 text-gray-500"><i class="fas fa-bars"></i></i>
<div class="text-sm text-gray-500">首页 / 订单管理 / 订单列表</div>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<i class="fa-icon w-6 h-6 text-gray-500 cursor-pointer"><i class="fas fa-bell"></i></i>
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
</div>
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-medium">张</div>
<div class="text-sm font-medium">张明远</div>
</div>
<button class="text-sm text-gray-500 hover:text-primary" onclick="logout()">退出登录</button>
</div>
</div>
<!-- 内容区域 -->
<div class="pt-16 px-6 pb-6 min-h-[1024px]">
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold">订单列表</h2>
<div class="flex space-x-3">
<div class="relative">
<input type="text" placeholder="搜索订单号/客户姓名" class="border border-gray-300 rounded-button px-4 py-2 pl-10 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fa-icon w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"><i class="fas fa-search"></i></i>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-button text-sm hover:bg-blue-700 !rounded-button whitespace-nowrap">
<i class="fa-icon w-4 h-4 mr-1"><i class="fas fa-plus"></i></i> 新增订单
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户姓名</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系电话</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">取件地址</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单状态</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">WX20230615001</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李静怡</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">138****5678</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">北京市朝阳区建国路88号</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 09:30</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-primary hover:text-blue-700 mr-3">查看</button>
<button class="text-red-500 hover:text-red-700">删除</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">WX20230614002</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王浩然</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">159****2345</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">上海市浦东新区张江高科技园区</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">处理中</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14 14:20</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-primary hover:text-blue-700 mr-3">查看</button>
<button class="text-red-500 hover:text-red-700">删除</button>
</td>
</tr>
<tr class="hover:bg-gray-50 bg-red-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">WX20230613003</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">陈思远</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">186****7890</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">广州市天河区珠江新城</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">异常订单</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-13 11:45</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-primary hover:text-blue-700 mr-3">查看</button>
<button class="text-red-500 hover:text-red-700">删除</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">WX20230612004</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">林雨晴</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">177****4567</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">深圳市南山区科技园</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">待配送</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-12 16:30</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-primary hover:text-blue-700 mr-3">查看</button>
<button class="text-red-500 hover:text-red-700">删除</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">WX20230611005</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">赵宇航</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">135****6789</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">成都市武侯区人民南路</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">已取件</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-11 10:15</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-primary hover:text-blue-700 mr-3">查看</button>
<button class="text-red-500 hover:text-red-700">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between mt-6">
<div class="text-sm text-gray-500">显示 1 到 5 条，共 128 条记录</div>
<div class="flex space-x-1">
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 hover:bg-gray-50">上一页</button>
<button class="px-3 py-1 border border-primary bg-primary text-white rounded-button text-sm">1</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 hover:bg-gray-50">2</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 hover:bg-gray-50">3</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 hover:bg-gray-50">下一页</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-semibold mb-4">订单状态统计</h3>
<div id="orderStatusChart" class="h-64"></div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-semibold mb-4">近7天订单趋势</h3>
<div id="orderTrendChart" class="h-64"></div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-semibold mb-4">异常订单提醒</h3>
<div class="space-y-4">
<div class="flex items-start p-4 border border-red-200 rounded-lg bg-red-50">
<i class="fa-icon w-6 h-6 mt-1 mr-3 text-red-500"><i class="fas fa-exclamation-circle"></i></i>
<div>
<div class="font-medium text-red-800">订单 WX20230613003 出现异常</div>
<div class="text-sm text-red-600 mt-1">客户投诉衣物有损坏，需要理赔处理</div>
<div class="text-xs text-gray-500 mt-2">2023-06-15 10:30 提交</div>
</div>
<button class="ml-auto text-sm text-primary hover:text-blue-700 whitespace-nowrap">处理工单</button>
</div>
<div class="flex items-start p-4 border border-yellow-200 rounded-lg bg-yellow-50">
<i class="fa-icon w-6 h-6 mt-1 mr-3 text-yellow-500"><i class="fas fa-exclamation-triangle"></i></i>
<div>
<div class="font-medium text-yellow-800">订单 WX20230614002 配送延迟</div>
<div class="text-sm text-yellow-600 mt-1">配送员反馈交通堵塞，预计延迟2小时</div>
<div class="text-xs text-gray-500 mt-2">2023-06-15 09:15 提交</div>
</div>
<button class="ml-auto text-sm text-primary hover:text-blue-700 whitespace-nowrap">联系配送</button>
</div>
</div>
</div>
</div>
</div>
<script>
function setActiveNavItem(element) {
document.querySelectorAll('.nav-item').forEach(item => {
item.classList.remove('bg-primary', 'text-white');
item.querySelector('i i').classList.remove('text-white');
item.querySelector('i i').classList.add('text-gray-600');
});
element.classList.add('bg-primary', 'text-white');
element.querySelector('i i').classList.remove('text-gray-600');
element.querySelector('i i').classList.add('text-white');
}
document.addEventListener('DOMContentLoaded', function() {
const toggleSidebar = document.getElementById('toggleSidebar');
const sidebar = document.querySelector('.sidebar');
toggleSidebar.addEventListener('click', function() {
sidebar.classList.toggle('collapsed');
const icon = this.querySelector('i');
if (sidebar.classList.contains('collapsed')) {
icon.classList.remove('fa-chevron-left');
icon.classList.add('fa-chevron-right');
document.querySelector('.ml-64').classList.remove('ml-64');
document.querySelector('.ml-64').classList.add('ml-20');
document.querySelector('.w-[calc(100%-16rem)]').classList.remove('w-[calc(100%-16rem)]');
document.querySelector('.w-[calc(100%-16rem)]').classList.add('w-[calc(100%-5rem)]');
} else {
icon.classList.remove('fa-chevron-right');
icon.classList.add('fa-chevron-left');
document.querySelector('.ml-20').classList.remove('ml-20');
document.querySelector('.ml-20').classList.add('ml-64');
document.querySelector('.w-[calc(100%-5rem)]').classList.remove('w-[calc(100%-5rem)]');
document.querySelector('.w-[calc(100%-5rem)]').classList.add('w-[calc(100%-16rem)]');
}
});
const orderStatusChart = echarts.init(document.getElementById('orderStatusChart'));
orderStatusChart.setOption({
animation: false,
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '订单状态',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '18',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 78, name: '已完成', itemStyle: { color: '#10B981' } },
{ value: 32, name: '处理中', itemStyle: { color: '#F59E0B' } },
{ value: 12, name: '待配送', itemStyle: { color: '#3B82F6' } },
{ value: 5, name: '异常订单', itemStyle: { color: '#EF4444' } },
{ value: 21, name: '已取件', itemStyle: { color: '#8B5CF6' } }
]
}
]
});
const orderTrendChart = echarts.init(document.getElementById('orderTrendChart'));
orderTrendChart.setOption({
animation: false,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['6/9', '6/10', '6/11', '6/12', '6/13', '6/14', '6/15'],
axisLine: {
lineStyle: {
color: '#9CA3AF'
}
},
axisLabel: {
color: '#6B7280'
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#9CA3AF'
}
},
axisLabel: {
color: '#6B7280'
},
splitLine: {
lineStyle: {
color: '#E5E7EB'
}
}
},
series: [
{
name: '订单量',
type: 'bar',
barWidth: '60%',
data: [23, 28, 32, 35, 29, 41, 37],
itemStyle: {
color: '#3B82F6'
}
}
]
});
window.addEventListener('resize', function() {
orderStatusChart.resize();
orderTrendChart.resize();
});
function logout() {
if(confirm('确定要退出登录吗？')) {
window.location.href = '../register.html';
}
}
});
</script>
</body>
</html>
